<template>
<div>
  <el-card style="margin-bottom: 15px">
    <el-descriptions title="用户信息">
      <el-descriptions-item label="id">{{userInfo.id}}</el-descriptions-item>
      <el-descriptions-item label="账号">{{userInfo.account}}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{userInfo.name}}</el-descriptions-item>
      <el-descriptions-item label="联系方式">{{userInfo.phone}}</el-descriptions-item>
      <el-descriptions-item label="注册时间">{{userInfo.createTime}}</el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-row :gutter="24">
    <el-col :span="24">
      <el-card shadow="always">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <el-form label-position="left" label-width="80px" :model="updUser">
          <el-form-item label="账号">
            <el-input v-model="updUser.account" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="updUser.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="updUser.password"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="updUser.phone"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="updateUser">更新</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>
import {getCollectById, removeCollect} from "@/api/collectApi";
import {getUserById, userUpdate} from "@/api/userApi";

export default {
  name: "Info",
  data(){
    return{
      updUser:{},
      userInfo:{},
      searchParams:{pageNum:1,pageSize:5,token:window.localStorage.getItem("token")},
      tableValue:{},
      total:10
    }
  },
  methods:{
    getCollect(val){
      getCollectById(this.searchParams).then(res=>{
          if (res.code===200){
            this.tableValue=res.data.records;
            this.total=res.data.total;
          }
      })
    },
    getUser(){
        getUserById(window.localStorage.getItem("token")).then(res=>{
          if (res.code===200){
            this.userInfo=res.data;
            this.updUser=res.data;
          }
        })
    },
    deleteCollect(jid) {
      let collect = {jid: jid, token: window.localStorage.getItem("token")};
      removeCollect(collect).then(res => {
        if (res.code === 200) {
          this.getCollect();
        }
      })
    },
    handleCurrentChange(val) {
      this.searchParams.pageNum=val;
      console.log(`当前页: ${val}`);
      this.getCollect();
    },
    updateUser(){
      userUpdate(this.updUser).then(res=>{
        if (res.code===200){
            this.getUser();
        }
      })
    }
  },
  mounted() {
    this.getUser();
  }
}
</script>

<style scoped>

</style>
